{{ define "main/user-info.html" }}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {{ template "views/header" . }}
</head>
<body>
<div class="page-loading">
    <div class="rubik-loader"></div>
</div>
<div class="animated fadeIn timo-compile user-info-page">
    <div class="user-info layui-form">
        <div class="user-avatar-box">
            <img class="user-avatar" src="/assets/images/security.png" alt="头像"> <span
                class="edit-avatar" attr="data-url=/userPicture">修改头像</span>
        </div>
        <ul class="detail-info">
            <li>账号：<span id="user-username"></span></li>
            <li>昵称：<span id="user-nickname"></span></li>
            <li>性别：<span id="user-sex"></span></li>
            <li>电话：<span id="user-phone"></span></li>
            <li>邮箱：<span id="user-email"></span></li>
        </ul>
    </div>
    <form class="user-edit layui-form" action="" method="post" >
        <input type="hidden" name="id" id="id">
        <div class="layui-form-item">
            <label class="layui-form-label" for="nickname">用户昵称</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="nickname" placeholder="请输入用户昵称" id="nickname">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="phone">电话号码</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="phone" placeholder="请输入电话号码" id="phone">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="email">邮箱</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="email" placeholder="请输入邮箱" id="email">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="1" title="男" checked>
                <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>男</div></div>
                <input type="radio" name="sex" value="0" title="女" >
                <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>女</div></div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" for="intro">备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="intro" id="intro"></textarea>
            </div>
        </div>
        <div class="layui-form-item timo-finally">
            <button class="layui-btn" lay-filter="save" lay-submit=""><i class="fa fa-check-circle"></i> 保存</button>
            <a class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</a>
        </div>
    </form>
</div>
{{ template "views/footer" . }}
<script>
    initData();
    function initData(){
        $.ajax({
            type : 'get',
            url : '/api/v1/user/info',
            async : false,
            success : function(result) {
                var data = result.data
                $('#id').val(data.id);
                $("#nickname").val(data.nick_name);
                $("#phone").val(data.phone);
                $("#email").val(data.email);
                $("#intro").val(data.remark);
                $(":radio[name='sex'][value='" + data.sex + "']").prop("checked", "checked");
                $("#user-username").text(data.user_name);
                $("#user-nickname").text(data.nick_name);
                $("#user-sex").text(data.sex===1?'男':'女');
                $('#user-phone').text(data.phone);
                $('#user-email').text(data.email);
                $('.user-avatar').attr("src", data.avatar);
            }
        });
    }
    layui.use(['jquery', 'form', 'layer'], function () {
        var $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer;
        form.on('submit(save)', function (form) {
            var data = form.field;
            ajaxJsonRequest("POST", '/api/v1/users/update', JSON.stringify(data), function(result) {
                handlerResult(result, function (data) {
                    console.log(data)
                    layer.msg("更新成功", {icon: 6});
                    parent.layer.close(window.parent.layerIndex);
                });
            });
            return false;
        });
    });
</script>
</body>
</html>
{{ end }}